package showcase

import "github.com/templui/templui/internal/components/slider"

templ SliderExternalValue() {
	<div class="space-y-6 w-full max-w-sm">
		<div>
			@slider.Slider() {
				@slider.Input(slider.InputProps{
					ID:    "slider-external-value",
					Value: 50,
					Min:   0,
					Max:   100,
					Step:  1,
				})
			}
		</div>
		<div class="bg-muted p-4 rounded-md">
			<p class="text-sm text-muted-foreground mb-2">External value (linked to the slider):</p>
			<div class="text-3xl font-bold flex gap-1">
				@slider.Value(slider.ValueProps{
					For:   "slider-external-value",
					Class: "text-3xl font-bold text-primary",
				})
				%
			</div>
		</div>
	</div>
}
